<script setup lang="ts">
import type { VideoItem } from "@/type/lidare"
import {useRouter} from "vue-router"
const router = useRouter();
const props = defineProps<{
  item: VideoItem,
  width?: string,
  height?: string
}>();
const toDetail = () => {
  console.log(props.item);
  router.push({
    name:"videodetail",
    params:{
      id:props.item.id
    }
  })
}
</script>
<template>
  <div class="plant-item" :style="{ width: width || '1.72rem', height: height || '2.52rem' }" @click.stop="toDetail">
    <div class="img-box" :style="{ backgroundImage: `url(${props.item.cover})` }">
    </div>
    <div class="title">{{ props.item.citation }}</div>
    <div class="des">
      <div class="isTop" v-if="props.item.isTop == '2'">推荐</div>
      <div class="time">{{ props.item.tranTime }}</div>
      <div class="likes"><van-icon class="icon" name="eye-o" /><span>{{ props.item.likeNum }}</span></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.plant-item {
  overflow: hidden;
  border-radius: 0.08rem;

  .img-box {
    width: 100%;
    height: 1.72rem;
  }

  .title {
    font-size: .15rem;
    color: var(--text-black);
    font-weight: bold;
    box-sizing: border-box;
    padding: 0.1rem;
  }

  .des {
    display: flex;
    align-items: center;
    font-size: .12rem;
    color: var(--text-gray);
    box-sizing: border-box;
    padding: 0 .1rem;
    padding-top: .1rem;

    .isTop {
      height: .18rem;
      line-height: .18rem;
      padding: 0 .05rem;
      color: var(--text-white);
      background-color: var(--bgc-red);
      border-radius: .02rem;
    }

    .time {
      margin-left: .04rem;
    }

    .likes {
      margin-right: 0;
      margin-left: auto;
      display: flex;
      align-items: center;

      .icon {
        margin-right: .02rem;
      }
    }
  }
}
</style>